<template>
  <div class="container">
    <el-aside width="60px" class="nav-aside">
      <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#000911"
        text-color="#fff"
        active-text-color="#ffd04b"
        unique-opened
        router
      >
        <router-link to="/doctor/MyPatient" class="a">
          <el-menu-item index="/doctor/MyPatient">
            <i class="el-icon-s-custom"></i>
          </el-menu-item>
        </router-link>

        <router-link to="/doctor/DetailData" class="a">
          <el-menu-item index="/doctor/DetailData">
            <i class="el-icon-s-custom"></i>
            <span slot="title"></span>
          </el-menu-item>
        </router-link>

        <router-link to="/doctor/Management" class="a">
          <el-menu-item index="/doctor/Management">
            <i class="el-icon-message-solid"></i>
          </el-menu-item>
        </router-link>

        <router-link to="/doctor/DoctorData" class="a">
          <el-menu-item index="/doctor/DoctorData">
            <i class="el-icon-tickets"></i>
          </el-menu-item>
        </router-link>
      </el-menu>
    </el-aside>

    <div class="main-content">
      <div class="header">
        <!-- 搜索栏 -->
        <div class="search-container">
          <el-input
            v-model="searchId"
            placeholder="输入患者ID"
            clearable
            @keyup.enter="searchPatient"
            class="search-input"
          >
            <template #append>
              <el-button
                type="primary"
                @click="searchPatient"
                icon="el-icon-search"
              />
            </template>
          </el-input>
        </div>

        <div class="patient-list">
          <div
            v-for="(item, index) in displayedItems"
            :key="index"
            class="patient-item"
          >
            <div class="photo">
              <img
                v-if="hasSearched && item.avatar"
                :src="item.avatar"
                class="avatar"
              />
              <img
                v-else
                src="../assets/images/nullphoto.png"
                class="avatar"
              />
            </div>
            <div class="info-container">
              <div class="username">
                <span class="field">姓名：</span>
                <span class="field">{{ hasSearched ? item.name : '' }}</span>
              </div>
             <div class="bottom"> <div class="sex">
                <span class="label">性别：</span>
                <span class="value">{{ hasSearched ? item.sex : '' }}</span>
              </div>
              <div class="age">
                <span class="label">年龄：</span>
                <span class="value">{{ hasSearched ? item.age : '' }}</span>
              </div>
              <div class="type">
                <span class="label">血型：</span>
                <span class="value">{{ hasSearched ? item.type : '' }}</span>
              </div>
              <div class="section">
                <span class="label">科室：</span>
                <span class="value">{{ hasSearched ? item.section : '' }}</span>
              </div>

              <div class="history">
                <span class="label">过敏史：</span>
                <span class="value">{{ hasSearched ? item.allergy : '' }}</span>
              </div>

            </div>
            </div>
          </div>
        </div>
      </div>

      <div class="contain">
        <echart :userId="currentPatientId"></echart>
      </div>
    </div>
    </div>
</template>

<script>
import echart from '../components/echart.vue';
import axios from 'axios';

export default {
  components: {
    echart,
  },
  data() {
    return {
      allIds: [],
      patientData: [],
      displayedData: [],
      searchId: '',
      hasSearched: false,
      placeholderItems: Array(5).fill({}),
      currentPatientId: null
    };
  },
  computed: {
    displayedItems() {
      return this.hasSearched
        ? this.displayedData
        : this.placeholderItems;
    }
  },
  mounted() {
    this.fetchPatientData();
  },
  methods: {
  searchPatient() {
    if (!this.validateId(this.searchId)) {
        this.$message.error('请输入有效的患者ID')
        return
      }
      this.currentPatientId = this.searchId
    },
  validateId(id) {
      return /^\d+$/.test(id)
  },
  fetchPatientData() {
    axios.post('/myPatient', {})
    .then((response) => {
      this.patientData = response.data.map(item => ({
        ...item,
        id: Number(item.id)
      }))})
        .catch((error) => {
          console.error('获取数据失败:', error);
        });
    }
  },
};
</script>

<style scoped>
.search-container {
  position: relative;
  left: 50%;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0);
  border-radius: 4px;
  margin-right: 20px;
}
.container {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-image: url('../assets/images/detailbg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.nav-aside {
  width: 60px;
  height: 100%;
  background-color: #000911;
  overflow: hidden;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  position: relative;
  height: 75px;
  background-color: #242054;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.contain {
  flex: 1;
  overflow: auto;
  padding: 20px;
}

.photo {
  position: absolute;
  left: 20px;
  height: 90%;
  aspect-ratio: 1/1;
  transform: translateY(-50%);
  top: 50%;
}

.username {
  top: 15%;
  left: 8%;
  position: absolute;
  font-size: 1.2em;
  margin-right: 10px;
}

.bottom {
  top: 60%;
  left: 8%;
  position: absolute;
  display: flex;
  align-items: center;
}

.sex, .age, .type, .section, .history {
  margin-right: 10px;
  font-size: 0.9em;
}

</style>